<template>
    <div class="bar-chart-demo-container">
        <div class="demo-header">
            <h1>柱状图组件示例</h1>
            <p>展示如何使用 BarChart 组件创建各种柱状图</p>
        </div>

        <div class="demo-section">
            <h2>基础柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="basicData" :series="basicSeries" title="基础柱状图" :height="300" />
            </div>
        </div>

        <div class="demo-section">
            <h2>多指标柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="multiData" :series="multiSeries" title="多指标对比" :height="300" :showLegend="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>水平柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="horizontalData" :series="horizontalSeries" title="水平柱状图" :height="300"
                    direction="horizontal" :showLegend="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>堆叠柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="stackData" :series="stackSeries" title="堆叠柱状图" :height="300" :stack="true"
                    :showLegend="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>带数据标签的柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="labelData" :series="labelSeries" title="数据标签柱状图" :height="300" :showLabel="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>自定义样式的柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="customData" :series="customSeries" title="自定义样式柱状图" :height="300" :showGrid="false"
                    :showLegend="false" :showToolbox="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>24小时访问量分布</h2>
            <div class="chart-wrapper">
                <BarChart :data="zoomData" :series="zoomSeries" title="24小时访问量分布" :height="300" :enableZoom="true" />
            </div>
        </div>

        <div class="demo-section">
            <h2>动态数据柱状图</h2>
            <div class="chart-wrapper">
                <BarChart :data="dynamicData" :series="dynamicSeries" title="动态数据柱状图" :height="300" />
                <div class="controls">
                    <el-button @click="addData">添加数据</el-button>
                    <el-button @click="removeData">删除数据</el-button>
                    <el-button @click="updateData">更新数据</el-button>
                </div>
            </div>
        </div>

        <div class="demo-section">
            <h2>配置面板</h2>
            <div class="config-panel">
                <el-form :model="config" label-width="120px">
                    <el-form-item label="图表标题">
                        <el-input v-model="config.title" placeholder="输入图表标题" />
                    </el-form-item>
                    <el-form-item label="图表高度">
                        <el-input-number v-model="config.height" :min="200" :max="800" />
                    </el-form-item>
                    <el-form-item label="显示网格">
                        <el-switch v-model="config.showGrid" />
                    </el-form-item>
                    <el-form-item label="显示数据标签">
                        <el-switch v-model="config.showLabel" />
                    </el-form-item>
                    <el-form-item label="显示图例">
                        <el-switch v-model="config.showLegend" />
                    </el-form-item>
                    <el-form-item label="启用缩放">
                        <el-switch v-model="config.enableZoom" />
                    </el-form-item>
                    <el-form-item label="图表方向">
                        <el-radio-group v-model="config.direction">
                            <el-radio label="vertical">垂直</el-radio>
                            <el-radio label="horizontal">水平</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否堆叠">
                        <el-switch v-model="config.stack" />
                    </el-form-item>
                    <el-button @click="updateConfigData">更新配置数据</el-button>
                </el-form>
            </div>
            <div class="chart-wrapper">
                <BarChart :data="configData" :series="configSeries" :title="config.title" :height="config.height"
                    :showGrid="config.showGrid" :showLabel="config.showLabel" :showLegend="config.showLegend"
                    :enableZoom="config.enableZoom" :direction="config.direction" :stack="config.stack"
                    :showToolbox="config.showToolbox" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { BarChart } from '@/components/charts'

// 基础数据
const basicData = ref([
    { name: '1月', value: 120 },
    { name: '2月', value: 180 },
    { name: '3月', value: 220 },
    { name: '4月', value: 150 },
    { name: '5月', value: 280 },
    { name: '6月', value: 320 }
])

// 基础系列配置
const basicSeries = ref([
    { key: 'value', name: '销售额', color: '#409eff' }
])

// 多指标数据
const multiData = ref([
    { name: 'Q1', sales: 120, profit: 80, cost: 40 },
    { name: 'Q2', sales: 180, profit: 120, cost: 60 },
    { name: 'Q3', sales: 220, profit: 150, cost: 70 },
    { name: 'Q4', sales: 280, profit: 200, cost: 80 }
])

// 多指标系列配置
const multiSeries = ref([
    { key: 'sales', name: '销售额', color: '#409eff' },
    { key: 'profit', name: '利润', color: '#67c23a' },
    { key: 'cost', name: '成本', color: '#e6a23c' }
])

// 水平柱状图数据
const horizontalData = ref([
    { name: '产品A', value: 85 },
    { name: '产品B', value: 92 },
    { name: '产品C', value: 78 },
    { name: '产品D', value: 95 },
    { name: '产品E', value: 88 }
])

// 水平柱状图系列配置
const horizontalSeries = ref([
    { key: 'value', name: '产品评分', color: '#f56c6c' }
])

// 堆叠数据
const stackData = ref([
    { name: '1月', income: 120, expense: 80 },
    { name: '2月', income: 180, expense: 120 },
    { name: '3月', income: 220, expense: 150 },
    { name: '4月', income: 150, expense: 100 },
    { name: '5月', income: 280, expense: 180 },
    { name: '6月', income: 320, expense: 200 }
])

// 堆叠系列配置
const stackSeries = ref([
    { key: 'income', name: '收入', color: '#67c23a' },
    { key: 'expense', name: '支出', color: '#f56c6c' }
])

// 数据标签数据
const labelData = ref([
    { name: '周一', value: 820 },
    { name: '周二', value: 932 },
    { name: '周三', value: 901 },
    { name: '周四', value: 934 },
    { name: '周五', value: 1290 },
    { name: '周六', value: 1330 },
    { name: '周日', value: 1320 }
])

// 数据标签系列配置
const labelSeries = ref([
    { key: 'value', name: '访问量', color: '#e6a23c' }
])

// 自定义样式数据
const customData = ref([
    { name: 'A', value: 100 },
    { name: 'B', value: 200 },
    { name: 'C', value: 150 },
    { name: 'D', value: 300 },
    { name: 'E', value: 250 }
])

// 自定义样式系列配置
const customSeries = ref([
    {
        key: 'value',
        name: '自定义样式数据',
        color: '#9c27b0',
        itemStyle: {
            borderRadius: [8, 8, 0, 0],
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
        }
    }
])

// 24小时数据
const zoomData = ref([
    { name: '0:00', value: 5 },
    { name: '1:00', value: 3 },
    { name: '2:00', value: 1 },
    { name: '3:00', value: 0 },
    { name: '4:00', value: 0 },
    { name: '5:00', value: 2 },
    { name: '6:00', value: 8 },
    { name: '7:00', value: 15 },
    { name: '8:00', value: 25 },
    { name: '9:00', value: 30 },
    { name: '10:00', value: 28 },
    { name: '11:00', value: 35 },
    { name: '12:00', value: 42 },
    { name: '13:00', value: 38 },
    { name: '14:00', value: 45 },
    { name: '15:00', value: 50 },
    { name: '16:00', value: 48 },
    { name: '17:00', value: 55 },
    { name: '18:00', value: 60 },
    { name: '19:00', value: 52 },
    { name: '20:00', value: 45 },
    { name: '21:00', value: 38 },
    { name: '22:00', value: 25 },
    { name: '23:00', value: 15 }
])

// 24小时系列配置
const zoomSeries = ref([
    { key: 'value', name: '访问量', color: '#ff9800' }
])

// 动态数据
const dynamicData = ref([
    { name: '第1天', value: Math.floor(Math.random() * 100) },
    { name: '第2天', value: Math.floor(Math.random() * 100) },
    { name: '第3天', value: Math.floor(Math.random() * 100) },
    { name: '第4天', value: Math.floor(Math.random() * 100) },
    { name: '第5天', value: Math.floor(Math.random() * 100) }
])

// 动态系列配置
const dynamicSeries = ref([
    { key: 'value', name: '动态数据', color: '#9c27b0' }
])

// 配置数据
const configData = ref([
    { name: '项目A', value: 85 },
    { name: '项目B', value: 92 },
    { name: '项目C', value: 78 },
    { name: '项目D', value: 95 },
    { name: '项目E', value: 88 }
])

// 配置系列配置
const configSeries = ref([
    { key: 'value', name: '项目评分', color: '#409eff' }
])

// 配置对象
const config = reactive({
    title: '配置示例柱状图',
    height: 350,
    showGrid: true,
    showLabel: false,
    showLegend: true,
    enableZoom: false,
    showToolbox: false,
    direction: 'vertical',
    stack: false
})

// 添加数据
const addData = () => {
    const newIndex = dynamicData.value.length + 1
    const newValue = Math.floor(Math.random() * 100)
    dynamicData.value.push({
        name: `第${newIndex}天`,
        value: newValue
    })
}

// 删除数据
const removeData = () => {
    if (dynamicData.value.length > 1) {
        dynamicData.value.pop()
    }
}

// 更新数据
const updateData = () => {
    dynamicData.value.forEach(item => {
        item.value = Math.floor(Math.random() * 100)
    })
}

// 更新配置数据
const updateConfigData = () => {
    configData.value.forEach(item => {
        item.value = Math.floor(Math.random() * 100)
    })
}
</script>

<style scoped>
.bar-chart-demo-container {
    padding: 24px;
    background: #f5f7fa;
    min-height: 100vh;
}

.demo-header {
    text-align: center;
    margin-bottom: 32px;
}

.demo-header h1 {
    color: #303133;
    margin-bottom: 8px;
}

.demo-header p {
    color: #606266;
    font-size: 16px;
}

.demo-section {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.demo-section h2 {
    color: #303133;
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 2px solid #409eff;
    padding-bottom: 8px;
}

.chart-wrapper {
    margin-bottom: 20px;
}

.controls {
    margin-top: 16px;
    text-align: center;
}

.controls .el-button {
    margin: 0 8px;
}

.config-panel {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}

.config-panel .el-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.config-panel .el-form-item {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .bar-chart-demo-container {
        padding: 16px;
    }

    .demo-section {
        padding: 16px;
    }

    .config-panel .el-form {
        grid-template-columns: 1fr;
    }
}
</style>
